<template>
    <view class='my-unit'>
			<view class="uni-list">
			    <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,index) in infoArray" :unitName="unitName" :key="index"
			        >
					<view class="uni-media-list">
						<view class="list-cell-head">
							<text class="left">{{idx}}</text>
							<text class="right">{{value.passCheckStatus}}</text>
						</view>
						<view class="list-cell-body"  @click="goDetail(value)">
							<image class="pass-status-image" :src="'/static/imgs/'+value.passCheckStatus+'.png'"></image>
							<view class="body-content">
								<view class="content-top">
									<!-- 小程序不支持标签中使用函数方式 -->
									<!--
									<label v-if = "value.vehicleStatus" >状态:<text>{{convertStatus(value.vehicleStatus)}}</text></label>
									-->
									<label>车牌号:<text>{{value.carNum}}</text></label>
									<label>车辆类型:<text>{{value.carType}}</text></label>
									<label>驾驶员:<text>{{value.driverName}}</text></label>
									
									<label v-if = "value.passStartTime" >通行时间:<text>{{value.passStartTime.substring(0,10)}}至{{value.passEndTime.substring(0,10)}}</text></label>
									<label v-else-if="value.appStartTime">申请时间:<text>{{value.appStartTime.substring(0,10)}}至{{value.appEndTime.substring(0,10)}}</text></label>
									
								</view>
								<view class="content-bottom">
								</view>
							</view>
						</view>
						<view class="list-cell-footer">
							<view v-if = "unitName == 'dirverUnit'"  class="right">
								<button class="apply-again" @click="applyAgain(value.id)">再次申请</button>
								<button class="apply-info" @click="applyInfo(value.id)">查看详情</button>
							</view>
							<view v-if = "unitName == 'policeUnit'"  class="right">
								<button class="apply-info" @click="policeVerifyPassInfo(value.id)">查看详情</button>
							</view>
						</view>
					</view>
					
					
					
			    </view>
			</view>
    </view>
</template>

<script>
	import uniIcons from "@/components/uni-ui/uni-icons/uni-icons.vue"
	
    export default{
		components: {uniIcons},
        data() {
            return {
				unitNames:{
					seizure:"seizure",
					reqRescue:"reqRescue",
					resuced:"resuced",
				},
				last_id: "",
				vStatus: this.vehicleStatus,
            }
        },
		//父组件传递的数据
		props: {
			infoArray: { //需循环的输入数组
				type: Array,
				default () {
					return [];
				}
			},
			idx: { // index
				type: Number,
				default: 0
			},
			unitName:{
				type: String,
				default:'',
			}
		},
        methods:{
			doDel(){
				this.$store.commit("switch_loading")
			},
			goDetail(item){
				var uparams = JSON.stringify(item); // 这里转换成 字符串
				uni.navigateTo({
				    url: '/pages/bness/detail?uparams='+uparams,
				});
			},
			convertStatus(status){
				let _this = this;
			    let s = '未知';
				//console.log("_this.vehicleStatus:")
				//console.log(_this.vehicleStatus);
				for(let i in _this.vehicleStatus){
					//console.log("status:"+status);
					//console.log("status:"+_this.vehicleStatus[i]["code"]);
					if(status==_this.vehicleStatus[i]["code"]){
						s=_this.vehicleStatus[i]["name"];
						break;
					}
				}
				console.log(s);
				return s;
			},
			applyAgain(id){
				uni.navigateTo({
				    url: '/pages/bness/passApply?id='+id,
				});
			},
			applyInfo(id){
				uni.navigateTo({
				    url: '/pages/bness/applyInfo?id='+id,
				});
			},
			policeVerifyPassInfo(id){
				uni.navigateTo({
				    url: '/pages/bness/applyInfo?id='+id,
				});
			}
        },
		computed:{
			
		},
		created() {
			
		},
    }
</script>
<style lang='scss'>
    .my-unit{
		margin: 20upx 10upx;
		background-color: #ffffff;
		font-size: 28upx;
		transform: all 1s;
		font-size: 32upx;
		
		.uni-list {
		    background-color: #FFFFFF;
		    position: relative;
		    width: 100%;
		    display: flex;
		    flex-direction: column;
		}
		
		.uni-list:after {
		    position: absolute;
		    z-index: 10;
		    right: 0;
		    bottom: 0;
		    left: 0;
		    height: 1px;
		    content: '';
/* 		    -webkit-transform: scaleY(.5);
		    transform: scaleY(.5);
		    background-color: #c8c7cc; */
		}
		
		.uni-list::before {
		    position: absolute;
		    z-index: 10;
		    right: 0;
		    top: 0;
		    left: 0;
		    height: 1px;
		    content: '';
	/* 	    -webkit-transform: scaleY(.5);
		    transform: scaleY(.5);
		    background-color: #c8c7cc; */
		}
		
		.uni-list-cell {
		    position: relative;
		    display: flex;
		    flex-direction: row;
		    justify-content: space-between;
		    align-items: center;
			
			border: 4upx solid #C8C7CC;
			border-radius: 20upx;
			box-shadow: 10upx 10upx 15upx rgba(200,200,200,0.9);
		}
		
		.uni-list-cell-hover {
		    background-color: #eee;
		}
		
		.uni-list-cell::after {
		    position: absolute;
		    z-index: 3;
		    right: 0;
		    bottom: 0;
		    left: 30upx;
		    height: 1px;
		    content: '';/* 
		    -webkit-transform: scaleY(.5);
		    transform: scaleY(.5);
		    background-color: #c8c7cc; */
		}
		
		.uni-list .uni-list-cell:last-child::after {
		    height: 0upx;
		}
		
		/* 图文列表 */
		.uni-media-list {
/* 		    padding: 22upx 30upx; */
		    box-sizing: border-box;
		    display: flex;
		    width: 100%;
		    flex-direction:column;
		}
		.list-cell-head{
			display: flex;
			align-items: center;
			padding: 22upx 30upx;
			border-bottom: 4upx solid #C8C7CC;
			.left {
				 flex:1;
			}

			.right {
				text-align: right;
				color: #F0AD4E;
			}
		
		}
		
		.list-cell-footer{
			display: flex;
			align-items: right;
			padding: 22upx 30upx;
			border-top: 4upx solid #C8C7CC;
	
			
			.left {
				 flex:1;
			}
			.right {
				display: inline-flex;
				
				
				width: 100%;
				.apply-again{
					background-color: #3f51b5;
					color: #E4E7ED;
				}
				
				.apply-info{
					background-color: #43a047;
					color: #E4E7ED;
				}
				
			}
			
			
			
		}

		
		.list-cell-body{
			padding: 22upx 30upx;
			box-sizing: border-box;
			display: flex;
			width: 100%;
			flex-direction:row;
			
			.pass-status-image{
				position:absolute;
				width: 100px;
				height: 100px;
				right: 20upx;
			}
		}
		
		.body-img {
		    width: 180upx;
		    height: 140upx;
		    margin-right: 20upx;
		}
		
		.body-content {
		    flex: 1;
		    flex-direction: column;
		    justify-content: space-between;
		    align-items: flex-start;
		    overflow: hidden;
		    height: auto;
		}
		
		.content-top {
		    width: 100%;

		    font-size: 28upx;
			
			display: flex;
			flex-direction: column;
			
			label {
				margin-top:12upx;
				color: #ADADAD;
				
				text{
					color: #424242;
				}
			}
			text{
				padding-left: 20upx;
				padding-bottom: 20upx;
			}
			
			.right {
				text-align: right;
				margin-right:2upx;
			}
		}
				
		.content-bottom {
			width: 100%;
			line-height: 30upx;
			font-size: 26upx;
			color: #8f8f94;
			
		    display: flex;
		    flex-direction: row;
		    justify-content: space-between;
		}
	}
</style>